<template>
  <ul
    :id="CAR_NUM_LIST_DOM_ID"
    class="car-num-list"
  >
    <template
      v-for="(item, index) of carNum"
      :key="index"
    >
      <li
        :class="[
          'car-num-item',
          {
            selected: index === currentIndex && !disabled,
            'new-energy': index === carNum.length - 1
          }
        ]"
        @click="handleChooseCarNum(item, index)"
      >
        <span class="default">{{ item.value }}</span>
        <ul
          v-if="index === carNum.length - 1 && !item.value"
          class="new-energy__item"
        >
          <li class="icon-plus">
            <base-svg-icon icon-class="icon-plus" />
          </li>
          <li class="icon-new-energy">
            <base-svg-icon icon-class="icon-new-energy" />
          </li>
        </ul>
      </li>
    </template>
  </ul>

  <keyboard
    ref="keyboardRef"
    :type="currentType"
    :focus-index="currentIndex"
    @fill="handleSelectedCarNum"
    @delete="handleDeleteCarNum"
  />
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

import { CAR_NUM_LIST_DOM_ID } from './constants';
import Keyboard from './keyboard.vue';

import { isEmpty } from '@/utils';

const emits = defineEmits(['change']);
const props = defineProps({
  default: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const keyboardRef = ref();
const currentIndex = ref(-1);
const currentType = ref('');
const carNum = ref([
  {
    type: 'area',
    value: '',
  },
  {
    type: 'letter',
    value: '',
  },
  {
    type: 'number',
    value: '',
  },
  {
    type: 'number',
    value: '',
  },
  {
    type: 'number',
    value: '',
  },
  {
    type: 'number',
    value: '',
  },
  {
    type: 'chinese',
    value: '',
  },
  {
    type: 'number',
    value: '',
  }
]);

watch(
  () => props.default,
  (val) => {
    if (val && val.length) {
      carNum.value.forEach((item, index) => {
        item.value = val[index] || '';
      });
    }
  },
  {
    immediate: true,
  }
);

const handleChooseCarNum = (item: TypeObject, index: number) => {
  currentType.value = item.type;
  currentIndex.value = index;
  if (!props.disabled) {
    keyboardRef?.value?.handleOpen?.();
  }
};

const handleSelectedCarNum = (val: string) => {
  carNum.value[currentIndex.value].value = val;
  if (!isEmpty(val)) {
    currentIndex.value += 1;
  }
  if (currentIndex.value < carNum.value.length) {
    currentType.value = carNum.value[currentIndex.value].type;
  } else {
    keyboardRef?.value?.handleClose?.();
  }

  const carNo = carNum.value.map((item) => item.value).join('');
  emits('change', carNo, carNum.value);
};

const handleDeleteCarNum = () => {
  if (carNum.value[currentIndex.value].value.length > 0) {
    carNum.value[currentIndex.value].value = '';
  } else if (currentIndex.value > 0) {
    currentIndex.value -= 1;
    carNum.value[currentIndex.value].value = '';
  }
  currentType.value = carNum.value[currentIndex.value].type;

  const carNo = carNum.value.map((item) => item.value).join('');
  emits('change', carNo, carNum.value);
};
</script>

<style lang="scss" scoped>
  .car-num-list {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .car-num-item {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 48px;
      background-color: var(--#{$ns}-color-main-bg);
      border-radius: 4px;

      .default {
        font-size: var(--#{$ns}-font-size-extra-large);
        font-weight: 600;
      }

      &.new-energy {
        .new-energy__item {
          font-size: 10px;
          line-height: 14px;
          color: var(--#{$ns}-color-primary);
          text-align: center;

          .icon-plus {
            position: relative;
            top: 6px;
          }

          .icon-new-energy {
            font-size: 26px;
          }
        }
      }

      &.selected {
        border: 1px solid var(--#{$ns}-color-primary);
      }
    }
  }
</style>
